<?php

// Dummy var that plots a path;
$path = array();
$toronto = '43.686743;-79.373474';
$barrie = '44.3812;-79.686998';
$owlrafting = '45.65984;-76.72351';
$path[0] = $toronto;
$path[1] = $barrie;
$path[2] = $owlrafting;
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
  <?php
  echo "var tripPathCoords = [";
  $count = count($path);
  for ($i = 0; $i < $count; $i++) {
    $latlong = explode(';', $path[$i]);
    echo "new google.maps.LatLng($latlong[0], $latlong[1])";
    if($i != $count - 1) echo ",\n";
  }
  echo "];\n";
  $latlong = explode(';',$path[$count-1]);
  echo "var myLatLng = new google.maps.LatLng($latlong[0], $latlong[1]);"
  ?>
  var myOptions = {
    zoom: 7,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var tripPath = new google.maps.Polyline({
    path: tripPathCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3
  });

  tripPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:80%; height:70%"></div>
</body>
</html>
